<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
        }

        render() {
            const isLogin = () => {
                const token = localStorage.getItem("token")
                return token ? <button onClick={this.logout}>退出登录</button> : <button onClick={this.login}>登录</button>
            }
            return (
                <div>
                    {isLogin()}
                </div>
            )
        }

        logout = () => {
            localStorage.removeItem("token")
            //更新UI
            this.setState({})
        }
        login = () => {
            localStorage.setItem("token", "fefJk121e")
            //更新UI
            this.setState({})

        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
